<template>
    <a-modal v-bind="defaultModalProps"
        v-model:open="open"
        :title="detail?.stateDisplayString"
        :footer="null"
        :width="480"
        class="view-interview-modal"
        @cancel="handleCancel()"
    >
        <div class="px-8 pt-6 pb-4 bg-theme/4" v-if="chatDetail">
            <a-flex align="center" :gap="14">
                <GpAvatarImg :src="chatDetail.memberAvatar" class="size-12 flex-none" v-if="chatDetail.memberAvatar"/>
                <a-flex align="center" justify="center" class="size-12 flex-none rounded-full bg-theme text-white text-sm font-bold" v-else>
                    {{ chatDetail.memberName?.charAt(0) }}
                </a-flex>
                <div class="flex-1 w-0 box-border">
                    <div class="text-primary text-xl !leading-7 font-bold">{{ chatDetail.memberName }}</div>
                    <a-space :size="6" class="text-secondary text-xs mt-1">
                        <template #split>
                            <div class="w-px h-2 bg-placeholder"></div>
                        </template>
                        <span class="!leading-4">{{mapGender.get(chatDetail.memberGender)}}</span>
                        <span class="!leading-4">{{chatDetail.memberAge}}岁</span>
                        <span class="!leading-4">{{chatDetail.memberCityName}}</span>
                        <span class="!leading-4">{{chatDetail.memberWorkYears}}年</span>
                        <span class="!leading-4">{{mapEducation.get(chatDetail.memberEducation)}}</span>
                    </a-space>
                </div>
            </a-flex>
            <div class="mt-4 grid grid-cols-[repeat(2,90px)] gap-[56px]">
                <a-flex align="center" :gap="6">
                    <GpFontIcon name="icon-shouji" class="text-secondary" />
                    <span class="text-sm !leading-5 text-primary">{{chatDetail.memberMobile ?? '--'}}</span>
                </a-flex>
                <a-flex align="center" :gap="6">
                    <GpFontIcon name="icon-weixin" class="text-secondary" />
                    <span class="text-sm !leading-5 text-primary">{{chatDetail.memberWeChat ?? '--'}}</span>
                </a-flex>
            </div>
        </div>
        <div class="px-8 pt-6" v-if="detail">
            <a-space direction="vertical" :size="12">
                <div class="grid grid-cols-[4em] grid-flow-col gap-4">
                    <span class="text-third text-sm">面试时间</span>
                    <span class="text-primary text-sm">{{detail.interviewTimeString}}</span>
                </div>
                <div class="grid grid-cols-[4em] grid-flow-col gap-4">
                    <span class="text-third text-sm">应聘岗位</span>
                    <span class="text-primary text-sm">{{detail.jobName}}</span>
                </div>
                <div class="grid grid-cols-[4em] grid-flow-col gap-4">
                    <span class="text-third text-sm justify-self-end">联系人</span>
                    <span class="text-primary text-sm">{{detail.interviewUserName}} | {{detail.interviewUserMobile}}</span>
                </div>
                <div class="grid grid-cols-[4em] grid-flow-col gap-4">
                    <span class="text-third text-sm">面试地址</span>
                    <span class="text-primary text-sm">{{detail.jobAddress?.fullAddress}}</span>
                </div>
                <div class="grid grid-cols-[4em] grid-flow-col gap-4">
                    <span class="text-third text-sm">备注事项</span>
                    <span class="text-primary text-sm">{{detail.note ?? '--'}}</span>
                </div>
            </a-space>
            <a-flex justify="end" align="center" :gap="8" class="mt-[56px]">
                <div @click="handleReInvite" v-if="[EnumInterviewState.不通过, EnumInterviewState.取消, EnumInterviewState.已通过].includes(detail.state)">
                    <a-flex justify="center" align="center" class="bg-theme touchable-opacity h-10 px-5 rounded-sm text-white text-sm">
                        重新邀约
                    </a-flex>
                </div>
                <div @click="handleFeedBack" v-if="detail.state === EnumInterviewState.待定">
                    <a-flex justify="center" align="center" class="bg-theme touchable-opacity h-10 px-5 rounded-sm text-white text-sm">
                        面试反馈
                    </a-flex>
                </div>
                <div @click="handleAdjust" v-if="detail.state === EnumInterviewState.待定 || detail.state === EnumInterviewState.待面试">
                    <a-flex justify="center" align="center" class="bg-[#EEEEEE] touchable-opacity h-10 px-5 rounded-sm text-third text-sm">
                        调整面试
                    </a-flex>
                </div>
                <div @click="handleCancelInterview" v-if="detail.state === EnumInterviewState.待定 || detail.state === EnumInterviewState.待面试">
                    <a-flex justify="center" align="center" class="bg-[#EEEEEE] touchable-opacity h-10 px-5 rounded-sm text-third text-sm">
                        取消面试
                    </a-flex>
                </div>
            </a-flex>
        </div>
    </a-modal>
    <InviteInterviewModal :session ref="inviteInterviewModalRef" @success="handleAfterInvite" />
    <InterviewFeedBack ref="interviewFeedBackRef" @success="refreshAsync" />
</template>
<script lang="ts" setup>
import { defaultModalProps } from '@/constants/comp-setting';
import type { Exposed, Props } from './types';
import { getMychatLatestinterviewChatId, postMychatCancelinterviewInterviewId } from '@/api/siderBar/myChat';
import { mapGender, mapEducation } from '@/constants/enum-options';
import type { Exposed as InterviewFeedBackExposed } from '@/components/InterviewFeedBack/types';
import type { Exposed as InviteInterviewModalExposed } from '../InviteInterviewModal/types';
import { message, Modal } from 'ant-design-vue';
import { EnumInterviewState } from '@/api/siderBar/model';
import { useAppStore } from '@/stores';

defineOptions({
    name: "ViewInterviewModal",
    inheritAttrs: false
})
defineExpose<Exposed>({
    open() {
        open.value = true
        refreshAsync()
    },
})
const emit = defineEmits<{
    close: []
    nextMessage: [nextMessageId?: MaybeUndefined<number>]
}>()
const { session, chatDetail } = defineProps<Props>()
const appStore = useAppStore()
const open = ref(false)
const { data: detail, refreshAsync } = useRequest(() => getMychatLatestinterviewChatId(session!), {
    manual: true,
    onBefore() {
        appStore.toggleLoading(true)
    },
    onAfter() {
        appStore.toggleLoading(false)
    }
})
const interviewFeedBackRef = ref<InterviewFeedBackExposed>()
const inviteInterviewModalRef = ref<InviteInterviewModalExposed>()
function handleCancel() {
    open.value = false
    emit("close")
}
function handleReInvite() {
    if (inviteInterviewModalRef.value) {
        inviteInterviewModalRef.value.open({
            interviewAddress: detail.value?.jobAddressId,
            interviewer: detail.value?.interviewUserId,
            interviewPlatform: detail.value?.platform,
            interviewType: detail.value?.type,
            jobTypeId: detail.value?.jobId,
            note: detail.value?.note
        })
    }
}
function handleFeedBack() {
    if (interviewFeedBackRef.value) {
        interviewFeedBackRef.value.open({
            interviewId: detail.value?.id!
        })
    }
}
function handleAdjust() {
    if (inviteInterviewModalRef.value) {
        inviteInterviewModalRef.value.open({
            interviewAddress: detail.value?.jobAddressId,
            interviewDateTime: detail.value?.interviewTime,
            interviewer: detail.value?.interviewUserId,
            interviewPlatform: detail.value?.platform,
            interviewType: detail.value?.type,
            jobTypeId: detail.value?.jobId,
            note: detail.value?.note
        })
    }
}
function handleCancelInterview() {
    Modal.confirm({
        title: "确认提示",
        content: "确定要取消该面试吗？",
        async onOk() {
            const nextMessageId = await postMychatCancelinterviewInterviewId(detail.value?.id!)
            message.success("面试已取消")
            emit("nextMessage", nextMessageId)
            handleCancel()
        },
    })
}
function handleAfterInvite(nextMessageId: number) {
    refreshAsync()
    emit("nextMessage", nextMessageId)
}
</script>
<style lang="less">
.view-interview-modal {
    .ant-modal-content.ant-modal-content {
        padding-inline: 0;
    }
    .ant-modal-header.ant-modal-header {
        padding-inline: 32px;
    }
}
</style>